<template>
	<view class="model chesheng-model">
		<view class="chesheng-model-title">{{ title }}</view>
		<view class="chesheng-model-list">
			<view class="chesheng-model-item" :class="active==index?'item-active':''" v-for="(item,index) in list" :key="index" @click="activeTap(index,item)">{{ item.name }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"radioTag",
		props:{
			hxActive:{
				type:Number,
				default: -1
			},
			activeNum:{
				type: Boolean,
				default: false
			},
			title:{
				type:String,
				default: ''
			},
			list:{
				type: Array,
				default(){
					return []
				}
			}
		},
		watch:{
			activeNum(newVal){
				if(newVal){
					this.active = -1
				}
			},
			hxActive(newVal){
				this.active = newVal-1
			}
		},
		data() {
			return {
				active: -1
			};
		},
		methods:{
			activeTap(index,item){
				if(this.active == index){
					this.active = -1
					this.$emit('itemTo',null)
				}else{
					this.active = index
					this.$emit('itemTo',item)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.model{
		width: 100%;
		background-color: #fff;
	}
	.chesheng-model{
		padding: 0rpx 24rpx 24rpx;
		box-sizing: border-box;
		border-bottom: 20rpx solid #f8f8f8;
		.chesheng-model-title{
			font-size: 28rpx;
			color: #333;
			font-weight: bolder;
			padding: 24rpx 0rpx;
			box-sizing: border-box;
		}
		.chesheng-model-list{
			display: flex;
			flex-wrap: wrap;
			padding: 24rpx;
			box-sizing: border-box;
			padding-top: 0;
			.chesheng-model-item{
				padding: 12rpx 24rpx;
				margin-top: 24rpx;
				margin-right: 28rpx;
				border-radius: 6rpx;
				background-color: #f3f3f3;
				font-size: 28rpx;
				color: #858585;
				box-sizing: border-box;
			}
			.item-active{
				background-color: #67b5ff!important;
				color: #ffffff !important;
			}
		}
	}
</style>
